<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>数据分析</title>
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width,height=device-height,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0"
          name="viewport">
    <!--    <link href="https://hk.hnshengzhong.cn/app/admin/component/pear/css/pear.css" rel="stylesheet"/>-->
    <!--    <link href="https://hk.hnshengzhong.cn/app/admin/admin/css/reset.css" rel="stylesheet"/>-->
    <!--    <link href="https://hk.hnshengzhong.cn/app/admin/demos/css/console1.css" rel="stylesheet"/>-->
    <!--    <link href="https://hk.hnshengzhong.cn/app/admin/demos/css/console2.css" rel="stylesheet"/>-->
    <link rel="stylesheet" href="https://unpkg.com/vant@2.12/lib/index.css"/>
    <!--    <script src="https://hk.hnshengzhong.cn/app/admin/component/layui/layui.js"></script>-->
    <!--    <script src="https://hk.hnshengzhong.cn/app/admin/component/pear/pear.js"></script>-->
    <!--    <script src="https://hk.hnshengzhong.cn/app/admin/admin/js/permission.js"></script>-->
    <!--    <script src="https://hk.hnshengzhong.cn/app/admin/admin/js/common.js"></script>-->
    <!--    <script src="https://hk.hnshengzhong.cn/admin/js/common.js"></script>-->

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://unpkg.com/vant@2.12.54/lib/vant.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
    <script src="https://unpkg.com/@jiaminghi/data-view@2.10.0/dist/datav.min.vue.js"></script>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div id="app">
    <div class="pageIndex">
        <div class="bg">
            <img src="./img/bg.png" alt="">
        </div>
        <div class="content">
            <div class="title">
                <van-popover
                        v-model="showPopover"
                        theme="dark"
                        trigger="click"
                        :actions="accountList"
                        @select="onSelect"
                >
                    <template #reference>
                        <div v-show="Object.keys(active_account).length > 0" class="name">{{active_account.title}}</div>
                    </template>
                </van-popover>
            </div>
            <transition name="bounce">
                <div v-if="tagVisible" class="tag">
                    <div class="name">累计收益</div>
                    <div class="num" v-if="cardData.profit">{{parseFloat(cardData.profit).toFixed(2)}}</div>
                    <div class="trend">{{cardData.update_time}}</div>
                </div>
            </transition>

            <transition name="slide-fade">
                <div class="all_account" v-show="listVisible">
                    <h3>全部账号</h3>
                    <div class="box_list">
                        <div class="box_item">
                            <div>所有账号未实现收益</div>
                            <div class="num">
                                {{allUpl.toFixed(2)}} <span>$</span>
                            </div>
                            <img src="./img/u15751.png" alt="">
                        </div>
                        <div class="box_item">
                            <div>所有账号占用保证金</div>
                            <div class="num">
                                {{allOccupy.toFixed(2)}} <span>$</span>
                            </div>
                            <img src="./img/u15760.png" alt="">
                        </div>
                    </div>
                </div>
            </transition>

            <transition name="slide-fade">
                <div class="list_data" v-if="listVisible">
                    <h3>账号数据</h3>
                    <div class="list">
                        <div class="item" v-for="(item, index) in config" :key="index">
                            <div class="lt">
                                <div class="money">
                                    <p v-if="item.type === 'value'">
                                        {{parseFloat(cardData[item.key]).toFixed(2)}}
                                    </p>
                                    <p v-else-if="item.type === 'radio'">
                                        {{parseFloat(cardData[item.key] * 100).toFixed(2)}}
                                    </p>
                                    <p v-else-if="item.type === 'text'">
                                        {{cardData[item.key]}}
                                    </p>
                                    <p class="time" v-else-if="item.type === 'date'">
                                        {{cardData[item.key].split(' ')[0]}}
                                    </p>
                                    <p class="time" v-else-if="item.type === 'time'">
                                        {{ getTime(cardData[item.key])}}
                                    </p>
                                    <span>{{item.type | iconFormat(item.type)}}</span>
                                </div>
                                <div class="name">{{item.label}}</div>
                            </div>
                            <div class="rg" v-if="item.icon">
                                <van-icon :name="item.icon" color="#2554ff" size="32"/>
                            </div>
                        </div>
                    </div>
                </div>
            </transition>

            <div class="percent" v-show="listVisible">
                <h3>货币收益率</h3>
                <div class="percent_line">
                    <div class="lt">
                        <div>{{parseFloat(cardData.current_months_ratio * 100).toFixed(2)}}%</div>
                        <div><span>当月收益率</span></div>
                    </div>
                    <div class="rg">
                        <div class="label">最近涨幅</div>
                        <img v-if="cardData.init_eq_ratio > 0" src="./img/u15716.png" alt="">
                        <img v-else src="./img/u15721.png" alt="">
                    </div>
                </div>
            </div>

            <div class="echart_data" v-if="listVisible">
                <div class="chart_title">
                    <h3>历史收益率</h3>
                </div>
                <div class="water_pond">
                    <dv-water-level-pond :config="waterConfig" style="width:200px;height:200px"/>
                </div>
            </div>

            <div class="echart_data">
                <h3 v-show="listVisible">每日收益</h3>
                <div id="echarts-bar"></div>
            </div>

            <div class="echart_data">
                <h3 v-show="listVisible">每月收益</h3>
                <div id="echarts-line"></div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        filters: {
            iconFormat(type) {
                return type === 'value' ? '$' : type === 'radio' ? '%' : ''
            }
        },
        data() {
            const config = [
                {label: '总权益', key: 'eq', type: 'value', icon: 'balance-pay'},
                {label: '占用金额', key: 'occupy_money', type: 'value', icon: 'refund-o'},
                {label: '可用保证金', key: 'avail_eq', type: 'value', icon: 'after-sale'},
                {label: '未实现盈亏', key: 'upl', type: 'value', icon: 'cash-back-record'},
                {label: '保证金率', key: 'mgn_ratio', type: 'radio', icon: 'discount'},
                {label: '回撤率', key: 'ret_rate', type: 'radio', icon: 'discount'},
                {label: '模型启动时间', key: 'create_time', type: 'date', icon: ''},
                {label: '持续运行时长', key: 'duration', type: 'time', icon: ''},
            ]
            const colors = ['#FF0087', '#00DDFF', '#37A2FF', '#80FFA5']
            const headers = {
                'Accept': 'application/json',
                'token': '02f12e48da12d94194180af38dc2a241'
            }
            return {
                config,
                colors,
                headers,
                waterConfig: {
                    data: [],
                    shape: 'round',
                    colors: ['rgb(255, 0, 135)', 'rgb(135, 0, 157)', 'rgb(0, 221, 255)', 'rgb(77, 119, 255)']
                },
                listVisible: false,
                tagVisible: false,
                showPopover: false,
                accountList: [],
                cardData: {},
                feeData: {},
                dailyPnlData: {},
                monthsData: {},
                active_account: {},
                allOccupy: 0,
                allUpl: 0,
                baseurl: 'https://hk.hnshengzhong.cn/admin/account/'
            }
        },
        async created() {
            await this.getAccountList()
        },
        mounted() {
        },
        methods: {
            // 账号选中
            onSelect(action) {
                this.listVisible = false
                this.tagVisible = false
                setTimeout(() => {
                    this.active_account = action
                    this.loadAllReq()
                }, 500)
            },
            // 加载数据
            async loadAllReq() {
                const id = this.active_account.id
                this.waterConfig.data = []
                await this.getData(id)
                await this.getDailyPnl(id)
                await this.getMonths(id)
            },
            // 柱状图数据
            setBarChart() {
                const barChart = echarts.init(document.getElementById('echarts-bar'), 'dark');
                let columnar_option = {
                    tooltip: {
                        trigger: 'axis',
                        confine: true,
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    backgroundColor: '#000000',
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '5%',
                        containLabel: true
                    },
                    legend: {},
                    xAxis: {
                        type: 'category',
                        data: this.dailyPnlData.source.map(item => item.total_date)
                    },
                    yAxis: {
                        type: 'value'
                    },
                    color: ['rgb(255, 0, 135)', 'rgb(0, 221, 255)'],
                    series: [
                        {
                            name: "收益",
                            data: this.dailyPnlData.source.map(item => item.total_pnl.toFixed(3)),
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {offset: 0, color: 'rgb(255, 0, 135)'},
                                            {offset: 1, color: 'rgb(135, 0, 157)'}
                                        ], false)
                                    }
                                }
                            }
                        },
                        {
                            name: "费用",
                            data: this.dailyPnlData.source.map(item => item.total_fee.toFixed(3)),
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {offset: 0, color: 'rgb(0, 221, 255)'},
                                            {offset: 1, color: 'rgb(77, 119, 255)'}
                                        ], false)
                                    }
                                }
                            }
                        }
                    ]
                };
                barChart.setOption(columnar_option);
            },
            // 设置折线图
            setLineChart() {
                const lineChart = echarts.init(document.getElementById('echarts-line'), 'dark');
                let line_option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    backgroundColor: '#000000',
                    legend: {},
                    grid: {
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: this.monthsData.source.map(item => item.months),
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    color: ['rgb(255, 0, 135)', 'rgb(0, 221, 255)'],
                    series: [
                        {
                            name: '费用',
                            type: 'line',
                            stack: 'Total',
                            areaStyle: {
                                opacity: 0.8,
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: 'rgb(255, 0, 135)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgb(135, 0, 157)'
                                    }
                                ])
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: this.monthsData.source.map(item => item.total_fee.toFixed(2))
                        },
                        {
                            name: '收益',
                            type: 'line',
                            stack: 'Total',
                            areaStyle: {
                                opacity: 0.8,
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: 'rgb(0, 221, 255)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgb(77, 119, 255)'
                                    }
                                ])
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: this.monthsData.source.map(item => item.total_pnl.toFixed(2))
                        }
                    ]
                };
                lineChart.setOption(line_option)
            },
            // 秒格式化
            getTime(value) {
                let result = ""
                let second = parseInt(value)
                if (second > 3600 * 24) {
                    let day = second / (3600 * 24)
                    second = second % (3600 * 24)
                    let hour = second / 3600
                    result = `${parseInt(day)}天${parseInt(hour)}时`
                } else if (second > 3600) {
                    let hour = second / 3600
                    let minute = second % 3600 / 60
                    result = `${parseInt(hour)}时${parseInt(minute)}分`
                } else if (second > 60) {
                    let minute = second / 60
                    let sec = second % 60
                    result = `${parseInt(minute)}分${parseInt(sec)}秒`
                } else {
                    result = `${parseInt(second)}秒`
                }
                return result
            },
            /**
             * 接口数据
             */
            async getAccountList() {
                const url = `select`
                fetch(this.baseurl + url, {
                    method: 'get',
                    headers: { ...this.headers}
                }).then(res => res.text()).then(res => {
                    const data = JSON.parse(res)
                    if (data.code === 401) {
                        return window.location.href = 'https://hk.hnshengzhong.cn/app/admin#'
                    }
                    if (data.code === 0) {
                        data.data.map(item => {
                            item.text = item.title
                            this.allOccupy += parseFloat(item.frozen_bal - item.upl)
                            this.allUpl += parseFloat(item.upl)
                        })
                        this.accountList = data.data
                        this.active_account = data.data[0]
                        this.loadAllReq()
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            async getData(id) {
                const url = `get?id=${id}`
                fetch(this.baseurl + url, {
                    method: 'get',
                    headers: { ...this.headers}
                }).then(res => res.text()).then(res => {
                    const data = JSON.parse(res)
                    if (data.code === 0) {
                        this.cardData = {
                            ...data.data,
                            occupy_money: parseFloat(data.data.frozen_bal - data.data.upl).toFixed(2)
                        }
                        this.waterConfig.data.push(parseFloat(this.cardData.max_frozen_bal_ratio * 100).toFixed(2))
                        this.listVisible = true
                        this.tagVisible = true
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            async getDailyPnl(id) {
                const url = `dailyPnl?id=${id}`
                fetch(this.baseurl + url, {
                    method: 'get',
                    headers: { ...this.headers}
                }).then(res => res.text()).then(res => {
                    const data = JSON.parse(res)
                    if (data.code === 0) {
                        this.dailyPnlData = data.data
                        this.$nextTick(() => {
                            this.setBarChart()
                        })
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            async getMonths(id) {
                const url = `months?id=${id}`
                fetch(this.baseurl + url, {
                    method: 'get',
                    headers: { ...this.headers}
                }).then(res => res.text()).then(res => {
                    const data = JSON.parse(res)
                    if (data.code === 0) {
                        this.monthsData = data.data
                        this.$nextTick(() => {
                            this.setLineChart()
                        })
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
        }
    })
</script>